---
id: circularslider
title: CircularSlider
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import {} from "react-native-elements";

A slider with circular track and thumb

## Installation

<Tabs
  groupId="component"
  defaultValue="npm"
  values={[
    { label: "NPM", value: "npm" },
    { label: "Yarn", value: "yarn" },
  ]}
>
<TabItem value="npm">
  
```bash
npm install @react-native-elements/circular-slider
```

</TabItem>
<TabItem value="yarn">

```bash
yarn add @react-native-elements/circular-slider
```

</TabItem>
</Tabs>

## Usage

```jsx
import { CircularSlider } from "@react-native-elements/circular-slider";
```

```jsx
<CircularSlider value={value} onChange={setValue} />

<CircularSlider value={value} noThumb />

<CircularSlider maxAngle={90} />
```

Either use percentage (0 to 100) in value or specify maximumValue & minimumValue

## Props

<div class='table-responsive'>

| Name             | Type                    | Default    | Description                            |
| ---------------- | ----------------------- | ---------- | -------------------------------------- |
| `maxAngle`       | number                  | `359.9`    | Max angle in radians                   |
| `maximumValue`   | number                  | `100`      | Maximum value of the slider            |
| `minAngle`       | number                  | `0`        | Min angle in radians                   |
| `minimumValue`   | number                  | `0`        | Minimum value of the slider            |
| `noThumb`        | boolean                 | `false`    | Show thumb                             |
| `onChange`       | (value: number) => void | `(x) => x` | Handler for the value change           |
| `showText`       | boolean                 | `false`    | show text on center of slider          |
| `showThumbText`  | boolean                 | `false`    | show text on thumb                     |
| `textColor`      | string                  |            | color for text on center of slider     |
| `textSize`       | number                  | `80`       | text size for text on center of slider |
| `thumbColor`     | string                  |            | color of the slider thumb              |
| `thumbRadius`    | number                  | `12`       | Radius of the slider thumb             |
| `thumbTextColor` | string                  | `white`    | color of thumb text                    |
| `thumbTextSize`  | number                  | `10`       | text size of thumb text                |
| `trackColor`     | string                  |            | color of the slider track              |
| `trackRadius`    | number                  | `100`      | Radius of the slider track             |
| `trackTintColor` | string                  |            | color of the slider background         |
| `trackWidth`     | number                  | `5`        | Width of the slider track              |
| `value`          | number                  | `0`        | value of the slider                    |

</div>
